<template>
  <div class="management-report-container">
    <!-- 首屏内容 -->
    <div class="first-screen">
      <div class="management-report-header">
        <h2>管理报表</h2>
        <span>management statement</span>
        <img :src="image1" alt="" />
        <p @click="back()"><i class="iconfont icon-left1"></i> 返回</p>
      </div>

      <div class="management-report-introduce">
        <div>
          <p>
            企业售后经营管理包含人力资源、业务流程、财产、耗材等要素资源的管理，多数企业仍存在着“人员管理无章程、流程管理不清晰、物资管理不规范、财务管理不透明”等问题，要想建立更高效的服务运营体系，实现客户运营的价值闭环，需要围绕重点场景，修炼好数字化内功，用数据驱动决策。
          </p>
          <p>
            售后宝从「人事物财」四个维度出发，深挖行业痛点，定义售后服务标准化数据指标，搭建数字化运营数据体系，为决策提供事实依据，让数据创造价值。
          </p>
        </div>
        <img :src="image2" alt="" />
      </div>

      <div class="management-report-main">
        <div class="management-report-main-aside">
          <template v-for="item in managementReportMenuList.slice(0, 2)">
            <ManagementReportCard
              class="management-report-card"
              :key="item.title"
              :content="item"
              @menuToggle="menuToggle"
            />
          </template>
        </div>
        <div class="management-report-main-center">
          <img
            :class="{ rotate360: showAnimate }"
            :src="image3"
            alt=""
          />
          <span>数据分析</span>
        </div>
        <div class="management-report-main-aside">
          <template v-for="item in managementReportMenuList.slice(2, managementReportMenuList.length)">
            <ManagementReportCard
              class="management-report-card"
              :key="item.title"
              :content="item"
              @menuToggle="menuToggle"
            />
          </template>
        </div>
      </div>
    </div>

    <!-- 第二屏内容 -->
    <div class="second-screen" ref="secondScreen">
      <div class="chart-title">
        <div
          v-for="item in menuList"
          :key="item.title"
          :class="{ menuActive: menuActive === item.title }"
          @click="menuToggle(item.title)"
        >
          <span>{{ item.title }}</span>
          <i></i>
        </div>
      </div>

      <div v-if="chartList.length > 0" class="chart-main">
        <div class="chart-box" v-for="item in chartList" :key="item.title">
          <div class="chart-box-content" @click="jumpChartsPage(item.value)">
            <div>
              <div class="chart-box-header">
                <img :src="getAssetsFile(item.image)" alt="" />
                <h3>{{ item.title }}</h3>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.description"
                  placement="bottom"
                >
                  <i class="iconfont icon-jieshishuoming"></i>
                </el-tooltip>
              </div>
              <p>{{ item.target }}</p>
            </div>
            <div class="chart-box-button">查看详情</div>
          </div>
        </div>
      </div>
      <stats-chart-empty v-else>
        无本模块报表权限 <br> 请联系管理员配置
      </stats-chart-empty>
    </div>
  </div>
</template>

<script>
import {
  ref,
  toRefs,
  reactive,
  computed,
  onMounted,
  onUnmounted,
} from 'vue';
import ManagementReportCard from './components/ManagementReportCard.vue';
import {
  managementReportMenuList,
  managementReportChartList,
} from './ManagementReportModel';
import { getReportThemeTree } from '@src/api/ManagementReport'
import { isArray } from 'lodash'
/* component */
import StatsChartEmpty from '@src/modules/report/common/StatsChartEmpty.vue';
import { isDevelopment } from '@src/util/platform';
import { RESOURCE_PREFIX } from '@src/util/linkSwitch';
const resourcePrefix = isDevelopment() ? '' : RESOURCE_PREFIX
const ReportKeyIndexMap = {
  0: 'PEREA',
  1: 'WOMAMAGE',
  2: 'MATERIALANALYSIS',
  3: 'REVENUECONTROL'
}

import { getOssUrl, getLocalesOssUrl } from '@src/util/assets'

const image1 = getOssUrl('/intelligenceReportsHeader.png')
const image2 = getOssUrl('/managementReport1.png')
const image3 = getOssUrl('/managementReport2.png')

export default {
  components: {
    ManagementReportCard,
    StatsChartEmpty
  },
  setup() {
    const secondScreen = ref(null);

    const state = reactive({
      showAnimate: false,
      menuActive: '人效考核',
    });

    const jumpChartsPage = value => {
      const index = managementReportChartList.findIndex(
        item => item.title === state.menuActive
      );
      const menuName = managementReportChartList[index].value;

      window.location.href = `${resourcePrefix}/stats/intelligenceReport/charts?menuName=${menuName}&chartName=${value}`;
    };

    // 返回上一级
    const back = ()=>{
      window.location.href = `${resourcePrefix}/stats/intelligenceReport/index`;
    }

    onMounted(() => {
      state.showAnimate = true;
    });

    onUnmounted(() => {
      state.showAnimate = false;
    });

    return {
      ...toRefs(state),
      secondScreen,
      jumpChartsPage,
      back,
      image1,
      image2,
      image3
    };
  },
  data() {
    return {
      menuData: [],
      managementReportMenuList
    }
  },
  computed: {
    isHaveRenXiaoMenu() {
      return Boolean(this.menuMap['PEREA'])
    },
    isHaveTaskMenu() {
      return Boolean(this.menuMap['WOMAMAGE'])
    },
    isHaveWuziMenu() {
      return Boolean(this.menuMap['MATERIALANALYSIS'])
    },
    isHaveYingShouMenu() {
      return Boolean(this.menuMap['REVENUECONTROL'])
    },
    menuMap() {
      const menuList = this.menuData
      const menuMap = {}
      
      menuList.forEach(item => {
        menuMap[item.reportKey] = item
      })
      
      return menuMap
    },
    menuList() {
      const menus = []
      
      if (this.isHaveRenXiaoMenu) {
        menus.push(managementReportMenuList[0])
      }
      
      if (this.isHaveTaskMenu) {
        menus.push(managementReportMenuList[1])
      }
      
      if (this.isHaveWuziMenu) {
        menus.push(managementReportMenuList[2])
      }
      
      if (this.isHaveYingShouMenu) {
        menus.push(managementReportMenuList[3])
      }

      return menus
    },
    managementReportChartListMap() {
      let chartListMap = {}
      let children = []
      let childrenMap = {}
      let item = {}
      
      Object.keys(this.menuMap).forEach(key => {
        
        item = this.menuMap[key]
        
        if (isArray(item?.reportThemeList)) {
          children = item.reportThemeList
          childrenMap = {}
          children.forEach(child => {
            childrenMap[child.reportKey] = child
          })
        }
        
        chartListMap[item.reportKey] = JSON.parse(JSON.stringify(childrenMap))
      })
      
      return chartListMap
    },
    activeIndex() {
      return managementReportChartList.findIndex(
        item => item.title === this.menuActive
      )
    },
    chartList() {
      const key = ReportKeyIndexMap[this.activeIndex]
      if (!key) {
        return []
      }
      
      const currentChartMap = this.managementReportChartListMap[key] || {}
      let currentChartList = managementReportChartList[this.activeIndex]?.children || []
      
      currentChartList = currentChartList.filter(item => {
        return Boolean(currentChartMap[item.reportKey])
      })

      return currentChartList
    }
  },
  mounted() {
    this.getMenuData()
  },
  methods: {
    getAssetsFile(url, imgType = 'png') {
      // TODO 根据数据实际情况做枚举法返回图片地址
      return getOssUrl(`/${url}.${imgType}`)
    },
    /** 
     * @description 获取菜单数据
    */
    getMenuData() {
      getReportThemeTree().then(res => {
        if (res.code === 200) {
          let data = res.data || {}
          let dataList = data.reportThemeList || []
          let reportThemeList = dataList.filter(item => item.reportThemeList || [])
          reportThemeList = this.handlerFilterReportThemeList(reportThemeList, ['UNFINISHEDWO'])
          
          this.menuData = reportThemeList
          
        } else {
          this.$message({
            message: res.msg,
            duration: 1500,
            type: 'error',
          })
        }
      }).catch(err => {
        console.warn(err)
      })
    },
    handlerFilterReportThemeList(reportThemeList, filterKeys) {
      return reportThemeList.filter(item => {
        
        if (item?.reportThemeList) {
          item.reportThemeList = this.handlerFilterReportThemeList(item.reportThemeList, filterKeys)
        }
        
        return !filterKeys.includes(item.reportKey)
      })
    },
    menuToggle(title) {
      this.menuActive = title;
      
      this.$refs.secondScreen.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'nearest',
      })
      
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index';

.management-report-container {
  width: 100%;

  .first-screen {
    min-height: 100vh;
    padding: 58px 0;
    background: #031137;

    .management-report-header {
      width: 90%;
      height: 34px;
      margin: 0 auto;
      position: relative;

      h2 {
        @include font-setting(24px, 500, #00fcf9, 33px);
        @include position-setting(-30%, 50%, translate(50%, -50%));
        margin: 0;
      }

      span {
        @include font-setting(10px, 400, #00fcf9, 14px);
        @include position-setting(50%, 50%, translate(50%, -50%));
      }

      img {
        width: 100%;
        height: auto;
      }
      
      p {
        position: absolute;
        top: -50%;
        left: 0;
        color: #fff;
        cursor: pointer;
      }
    }

    .management-report-introduce {
      @include flex-setting(space-between, center);
      margin-left: 5%;

      p {
        width: 100%;
        @include font-setting(14px, 400, rgba(255, 255, 255, 0.9), 22px);
      }

      p:last-child {
        @include font-setting(16px, 500, #ffffff, 26px);
      }

      img {
        width: 586px;
        height: 316px;
      }
    }

    .management-report-main {
      @include flex-setting(space-between, center);
      padding: 0 5%;

      .management-report-main-aside {
        width: 34%;

        .management-report-card:first-child {
          margin-bottom: 54px;
        }
      }

      .management-report-main-center {
        width: 266px;
        height: 266px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        span {
          @include font-setting(20px, 500, #00fcf9, 28px);
          @include position-setting(50%, 50%, translate(50%, -50%));
        }

        .rotate360 {
          animation: rotate360 7s linear 0.2s infinite;
        }
      }
    }
  }

  .second-screen {
    min-height: 100vh;
    padding: 43px 2% 40px 5%;
    background: #fafbfd;
    position: relative;

    .chart-title {
      display: flex;

      div {
        @include font-setting(16px, 400, #595959, 22px);
        @include flex-setting(center, center, column);
        width: 80px;
        margin-right: 32px;
        cursor: pointer;
      }

      .menuActive {
        span {
          @include font-setting(18px, 500, #262626, 25px);
        }

        i {
          @include box-setting(40px, 2px, $color-primary-light-6, 1px);
          display: inline-block;
          margin-top: 4px;
        }
      }
    }

    .chart-main {
      width: 100%;
      height: 80%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 18px;

      .chart-box {
        min-height: 230px;
        min-width: 250px;
        @include box-setting(22%, 45%, transparent, 4px);
        @include flex-setting(center, center);
        margin-right: 3%;
        margin: 0 1%;
        margin-bottom: 1%;

        .chart-box-content {
          min-height: 200px;
          @include box-setting(100%, 90%, #ffffff, 4px);
          @include flex-setting(space-between, stretch, column);
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
          transition: all 0.1s ease;
          padding: 0 20px;
          cursor: pointer;

          .chart-box-header {
            margin: 28px 0 12px;
            display: flex;
            align-items: center;

            img {
              height: 40px;
              width: 40px;
              margin-right: 8px;
            }

            h3 {
              @include font-setting(16px, 400, #262626, 22px);
              margin: 0 4px 0 0;
            }

            .el-tooltip {
              height: 17px;
            }

            i {
              color: #595959;
              font-size: 14px;
            }
          }

          p {
            @include font-setting(14px, 400, #595959, 20px);
            margin-bottom: 8px;
          }

          .chart-box-button {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            @include font-setting(14px, 400, $color-primary-light-6, 20px);
            opacity: 0;
          }
        }

        .chart-box-content:hover {
          border-bottom: 3px $color-primary-light-6 solid;
          // -webkit-transform: scaleY(1.1);
          // transform: scaleY(1.1);
          min-height: 215px;

          .chart-box-button {
            opacity: 1;
          }
        }
      }
    }
  }
}

@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
</style>
<style lang="scss">
// .el-tooltip__popper {
//   max-width: 20%;
// }
</style>
